<template>
  <view class="container" @touchmove.stop.prevent>
    <u-popup
      :show="show"
      mode="center"
      :closeable="true"
      :round="20"
      @close="close"
    >
      <view class="popDialog">
        <view class="font-32 text-bold text-center m-b-42">会员卡</view>
        <view class="borders">
          <!-- <canvas canvas-id="qrcode" style="width: 136px; height: 136px;"></canvas> -->
          <yan-qr :filePath.sync="filePath" :text="mobile" :margin="20" />
        </view>
        <view class="c-60 flex-center">{{ mobile | filterMobile }}</view>
        <view class="trade" @click.stop="goLink()" v-if="tradePath"
          >交易明细</view
        >
      </view>
    </u-popup>
  </view>
</template>

<script>
import uQRCode from "@/common/js/uqrcode.js";
export default {
  name: "vipCard",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    mobile: {
      type: String,
      default: "",
    },
  },
  filters: {
    filterMobile(value) {
      return value.substr(0, 3) + "****" + value.substr(7, 4);
    },
  },
  data() {
    return {
      // mobile: '',
      qrCodeSrc: "",
      qrcodeSize: 136,
      filePath: "",
      tradePath: "", //交易明细跳转路径
    };
  },
  watch: {
    filePath() {
      console.log(this.filePath);
    },
  },

  mounted() {
    // 初始化时不需要生成二维码，由watch监听show变化触发
    // this.generateQRCode();
  },
  created() {
    this.getTradePath();
  },
  methods: {
    goLink() {
      this.$util.redirectTo(this.tradePath);
      // this.$util.redirectTo("/pages/balanceDetails/balanceDetails");
      this.close();
    },
    //获取交易明细配置路径
    getTradePath() {
      this.$api.sendRequest({
        url: "/api/site/trade",
        data: {},
        success: (res) => {
          if (res.code == 0) {
            this.tradePath = res.data.path;
          }
        },
      });
    },
    generateQRCode() {
      if (!this.mobile) {
        uni.showToast({
          title: "手机号为空，无法生成二维码",
          icon: "none",
        });
        return;
      }

      // 确保canvas已准备好
      this.$nextTick(() => {
        console.log("开始生成二维码...", uQRCode);
        uQRCode.make({
          canvasId: "qrcode",
          text: this.mobile,
          size: this.qrcodeSize,
          margin: 10,
          success: (res) => {
            this.qrCodeSrc = res;
            console.log("二维码生成成功:", res);
          },
          fail: (err) => {
            console.error("二维码生成失败:", err);
          },
        });
      });
    },
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.popDialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 590rpx;
  padding: 40rpx 0 10rpx;
  border-radius: 40rpx;
  .borders {
    display: flex;
    align-items: center;
    justify-content: center;
    // width: 382rpx;
    // height: 382rpx;
    // border-radius: 27rpx;
    // border: 1px solid red;
    // image {
    //   width: 313rpx;
    //   height: 313rpx;
    // }
  }
  .trade {
    color: $color-title2;
    text-decoration: underline;
  }
}
</style>
